const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    // 指定入口配置
    entry: './src/index.ts',
    // 指定输出配置
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        // 输出的配置文件不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },
    // loader配置
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                [
                                    "@babel/preset-env", {
                                        // 要兼容的浏览器版本
                                        targets: {
                                            chrome: '88',
                                            ie: '11'
                                        },
                                        // 指定 corejs 版本
                                        corejs: '3',
                                        // 执行按需加载
                                        useBuiltIns: 'usage'
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                exclude: /node-module/
            }
        ]
    },
    // 设置插件
    plugins: [
        // 清除 dist 目录
        new CleanWebpackPlugin(),
        // 设置 HTML 模板
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    // 设置模块
    resolve: {
        // 指定以下后缀文件可以实现模块功能
        extensions: ['.ts', '.js']
    },
    mode: 'development'
}